<template>
  <div class="wrap">
    <!-- https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/08reverse.mp4 -->
    <video src="/static/video/08reverse.mp4" autoplay muted></video>
    <h2><span> 牛大 </span>&emsp;我 想 <span>&emsp;你&emsp;</span> 了， 么么哒~~~</h2>
  </div>
</template>

<style lang="stylus" scoped>
.wrap
  height 100vh
  display flex
  align-items center
  justify-content center
  background-color #000
  position relative
h2
  position relative
  font-size 3.4em
  color #fff
  font-weight 900
  z-index 1
  overflow hidden
  margin 20px 20px 0 0
  span
    color #ff022c
  &::before
    content ''
    position absolute
    left -20%
    width 120%
    height 100%
    background linear-gradient(90deg, transparent 0%, #000 5%, #000 100%)
    animation animate 5.5s linear forwards
    animation-delay 3s
video
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  object-fit cover
  z-index 2
  pointer-events none
  mix-blend-mode screen
@keyframes animate
  0%
    left -20%
  100%
    left 110%
</style>
